<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<!--
1. Angular指令
	* Angular为HTML页面扩展的: 自定义标签属性或标签
	* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
  * ng-app: 指定模块名，angular管理的区域
  * ng-model： 双向绑定，输入相关标签
  * ng-init： 初始化数据
  * ng-click： 调用作用域对象的方法（点击时）
  * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
  * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
  * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
    * $index, $first, $last, $middle, $odd, $even
  * ng-show: 布尔类型， 如果为true才显示
  * ng-hide: 布尔类型， 如果为true就隐藏
-->

<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <h2>价格计算器(自动)</h2>
  数量: <input type="number" ng-model="count1">
  价格: <input type="number" ng-model="price1">
  <p> 总计: {{count1 * price1}}</p>
  <h2>价格计算器(手动)</h2>
  数量: <input type="number" ng-model="count2">
  价格: <input type="number" ng-model="price2">
  <button ng-click="getTotalPrice()">计算</button>
  <p> 总计: {{totalPrice}}</p>
  <div>
    <h2>人员信息列表</h2>
    <ul>
      <li ng-repeat="person in persons">
        {{$even}} -- {{$odd}} -- {{$index}} --{{person.username}} -- {{person.age}}
      </li>
    </ul>
  </div>

</div>

<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
  angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        $scope.price1 = 20;
        $scope.count1 = 1;

        $scope.price2 = 2;
        $scope.count2 = 10;

        $scope.totalPrice = 20 ;
        $scope.getTotalPrice = function () {
          $scope.totalPrice = $scope.count2 * $scope.price2;
        }

        $scope.persons = [
          {username:'kobi', age:39},
          {username:'kobi1',age:39},
          {username:'kobi2',age:39},
          {username:'kobi3',age:39},
          {username:'kobi4',age:39}
        ]
    })

  /*ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域*/



</script>

</body>
</html>